<template>
	<view class="setting-container">
		<view class="setting-main">
			<!-- 头像设置 -->
			<view class="avatar-section">
				<text class="section-title">头像</text>
				<view class="avatar-wrapper" @click="chooseAvatar">
					<image :src="formData.userAvatar || '/static/logo.png'" class="avatar"></image>
					<text class="tip-text">点击更换头像</text>
				</view>
			</view>
			
			<!-- 基本信息设置 -->
			<view class="form-section">
				<view class="form-item">
					<text class="label">昵称</text>
					<input type="text" v-model="formData.userName" placeholder="请输入昵称" class="input"/>
				</view>
				
				<view class="form-item">
					<text class="label">密码</text>
					<input type="password" v-model="formData.userPassword" placeholder="请输入新密码" class="input"/>
				</view>
				
				<view class="form-item">
					<text class="label">性别</text>
					<picker :range="genderOptions" @change="onGenderChange" class="picker">
						<view class="picker-text">{{ formData.userGender || '请选择性别' }}</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="label">角色</text>
					<text class="role-text">{{ roleOptions[userInfo.userRole] }}</text>
				</view>
			</view>
			
			<!-- 保存按钮 -->
			<button class="save-button" @click="handleSave">保存修改</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { User, UserUpdateRequest } from '@/datas/user.js'
import { http, fileHttp } from '@/utils/http.js'

const userInfo = ref(new User())
const genderOptions = ['男', '女']
const roleOptions = ['教师', '学生']

// 表单数据
const formData = reactive(new UserUpdateRequest())

onShow(() => {
	const storedUserInfo = uni.getStorageSync('userInfo')
	if (storedUserInfo) {
		userInfo.value = new User(storedUserInfo)
		// 初始化表单数据
		formData.userId = userInfo.value.userId
		formData.userName = userInfo.value.userName
		formData.userAvatar = userInfo.value.userAvatar
		formData.userGender = userInfo.value.userGender
		formData.userRole = userInfo.value.userRole
	}
})

// 选择头像
const chooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			console.log(res)
			formData.userAvatar = res.tempFilePaths[0]
			console.log(formData.userAvatar)
			// todo 修改头像逻辑
			fileHttp.upload('/upload', res.tempFilePaths[0]).then(res => {
				formData.userAvatar = res.data
			});
		}
	})
}

// 性别选择
const onGenderChange = (e) => {
	formData.userGender = genderOptions[e.detail.value]
}

// 保存修改
const handleSave = async () => {
	try {
		// 表单验证
		if (!formData.userName) {
			uni.showToast({
				title: '请输入昵称',
				icon: 'none'
			})
			return
		}
		
		if(!formData.userPassword){
			formData.userPassword = userInfo.value.userPassword
		}
		else if (formData.userPassword.length < 8) {
			uni.showToast({
				title: '密码长度必须大于等于8位',
				icon: 'none'
			})
			return
		}
		
		// 获取token
		const tokenInfo = uni.getStorageSync('tokenInfo')
		if (!tokenInfo || !tokenInfo.tokenValue) {
			uni.showToast({
				title: '登录已过期',
				icon: 'none'
			})
			return
		}
		
		// 发送请求
		const result = await http.post('/user/update/my', formData)
		
		if (result.message === 'ok' && result.data) {
			// 更新本地存储的用户信息
			const userResult = await http.get('/user/get/login')
			
			if (userResult.message === 'ok' && userResult.data) {
				const newUserInfo = new User(userResult.data)
				uni.setStorageSync('userInfo', newUserInfo)
				
				uni.showToast({
					title: '修改成功',
					icon: 'success'
				})
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		} else {
			uni.showToast({
				title: result.message || '修改失败',
				icon: 'none'
			})
		}
	} catch (error) {
		uni.showToast({
			title: '修改失败：' + error.message,
			icon: 'none'
		})
	}
}
</script>

<style>
.setting-container {
	padding: 20rpx;
	background-color: var(--design-background-color);
	min-height: var(--window-height);
}

.setting-main {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.section-title {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.avatar-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	margin-bottom: 10rpx;
}

.tip-text {
	font-size: 24rpx;
	color: #999;
}

.form-section {
	padding: 20rpx 0;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.label {
	width: 140rpx;
	font-size: 28rpx;
	color: #333;
}

.input {
	flex: 1;
	font-size: 28rpx;
	padding: 0 20rpx;
}

.picker {
	flex: 1;
}

.picker-text {
	font-size: 28rpx;
	color: #333;
	padding: 0 20rpx;
}

.role-text {
	flex: 1;
	font-size: 28rpx;
	color: #666;
	padding: 0 20rpx;
}

.save-button {
	margin-top: 60rpx;
	background-color: #95EC69;
	color: #333;
	font-weight: bold;
}
</style> 